<template>
  <div class="home_table_list">
    <el-table :data="state.matchData" style="height: calc(100% - 44px)" @row-click="store.clickMatchRow"
      v-loading="state.showtablelist" height="100%">
      <el-table-column prop="date" label="比赛时间" width="100">
        <template #default="scope">
          <div class="font12">
            <div>{{ scope.row.minfo.match_time }}</div>

            <!-- <div class="abicon">
              <img v-if="scope.row.stake == 1" src="@/assets/home/dui.png" style="width: 16px; height: 16px" alt="" />
              <img v-else src="@/assets/home/cuo.png" style="width: 16px; height: 16px" alt="" />
            </div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="联赛" show-overflow-tooltip>
        <template #default="scope">
          <div class="font12">
            <div class="hidden2">{{ scope.row.minfo.league_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="比分" width="50" align="center">
        <template #default="scope">
          <div class="font12">
            <div style="color: #fb445f; font-weight: 600">{{ scope.row.from_score.score }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="赛事" show-overflow-tooltip>
        <template #default="scope">
          <div class="pk">
            <img src="@/assets/home/vs.png" style="width: 16px; height: 16px; margin-right: 4px" alt="" />
            <div style="width: calc(100% - 18px)">
              <div class="hidden1 font12">{{ scope.row.minfo.home_name }}</div>
              <div class="hidden1 font12">{{ scope.row.minfo.away_name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="状态" width="85">
        <template #default="scope">
          <div class="font12">
            --
            <!-- {{ scope.row.data_info.status.live_time_status == '' ? '未' : scope.row.data_info.status.live_time_status }} -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="盘口" width="120" align="center">
        <template #default="scope">
          <div class="font12">
            <div>{{ scope.row.pk_odds_key_ch }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="赔率" width="80" align="center">
        <template #default="scope">
          <div class="font12">
            <div>{{ scope.row.order_info.odd }}</div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="赛果" width="85">
        <template #default="scope">
          <div class="font12">
            <div>{{scope.row.result.stake}}’({{scope.row.result.score}})</div>
          </div>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pagination">
      <!-- <el-pagination :page-size="state.orderPage.page_size" :pager-count="11" layout="prev, pager, next" :total="state.orderPage.total" /> -->

      <el-pagination @current-change="store.handlePageChange" v-model:current-page="state.orderPage.page"
        v-model:page-size="state.orderPage.page_size" layout=" prev, pager, next, " :total="state.orderPage.total" />
    </div>
  </div>
</template>

<script setup>
const { store, state } = inject('Home')
</script>

<style lang="scss" scoped>
.home_table_list {
  width: calc(100% - 688px);
  background: #fff;
  border: solid 1px #ebebeb;
  box-shadow: inset 0 1px 0 0 #ebebeb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pagination {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.font12 {
  font-size: 12px;
  color: #333;
}

.hidden1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk {
  display: flex;
  align-items: center;
}

.abicon {
  position: absolute;
  top: -4px;
  left: 8px;
}
</style>

<style>
.home_table_list .el-table .el-scrollbar__view {
  width: 100%;
}

.home_table_list .el-table thead tr th {
  height: 48px !important;
}

.home_table_list .el-table thead tr th .cell {
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
}

.home_table_list .el-table .cell {
  padding: 0 8px;
}

.home_table_list .el-table tbody tr td {
  height: 56px;
}

.home_table_list .el-table tbody .el-table__row td:nth-child(2) .el-tooltip {
  white-space: break-spaces !important;
}
</style>